<template>
  <div class="min-h-screen bg-rose-600 text-white flex flex-col">
    <header class="p-6">
      <nav class="flex flex-col sm:flex-row justify-between items-center">
        <h1 @click="setActiveContent('home')" class="text-3xl font-bold mb-4 sm:mb-0 hover:scale-105 transition-transform duration-300 cursor-pointer">
          My Elegant Blog
        </h1>
        <ul class="flex space-x-6">
          <li v-for="item in navItems" :key="item">
            <a 
              href="#" 
              @click.prevent="setActiveContent(item.toLowerCase())"
              class="hover:text-rose-200 transition-colors duration-300 hover:scale-110 inline-block transform"
              :class="{ 'text-rose-200': activeContent === item.toLowerCase() }"
            >
              {{ item }}
            </a>
          </li>
        </ul>
      </nav>
    </header>
    <main class="flex-grow flex items-center justify-center p-6">
      <component :is="activeComponent" @read-latest="setActiveContent('latest-post')" />
    </main>
    <footer class="p-6 text-center">
      <p class="hover:text-rose-200 transition-colors duration-300">
        &copy; 2024 My Elegant Blog. All rights reserved.
      </p>
      <div class="mt-4 flex justify-center space-x-4">
        <a 
          v-for="icon in socialIcons" 
          :key="icon.name" 
          :href="icon.url" 
          target="_blank"
          rel="noopener noreferrer"
          class="text-white hover:text-rose-200 transition-all duration-300 hover:scale-125 inline-block transform"
        >
          <component :is="icon.component" class="w-6 h-6" />
        </a>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { Facebook, Twitter, Instagram, Linkedin } from 'lucide-vue-next';

const navItems = ['Home', 'About', 'Posts', 'Contact'];
const socialIcons = [
  { name: 'Facebook', component: Facebook, url: 'https://facebook.com' },
  { name: 'Twitter', component: Twitter, url: 'https://twitter.com' },
  { name: 'Instagram', component: Instagram, url: 'https://instagram.com' },
  { name: 'LinkedIn', component: Linkedin, url: 'https://linkedin.com' }
];

const activeContent = ref('home');

const setActiveContent = (content) => {
  activeContent.value = content;
};

const HomeContent = {
  template: `
    <div class="text-center">
      <h2 class="text-5xl md:text-7xl font-bold mb-6 hover:scale-105 transition-transform duration-300">
        Welcome to My Blog
      </h2>
      <p class="text-xl md:text-2xl mb-8 hover:text-rose-200 transition-colors duration-300">
        Explore the world through my words and experiences
      </p>
      <a 
        href="#" 
        @click.prevent="$emit('read-latest')"
        class="bg-white text-rose-600 px-6 py-3 rounded-full text-lg font-semibold hover:bg-rose-100 transition-all duration-300 hover:scale-105 hover:shadow-lg inline-block transform"
      >
        Read Latest Post
      </a>
    </div>
  `
};

const AboutContent = {
  template: `
    <div class="text-center">
      <h2 class="text-4xl font-bold mb-6">About Me</h2>
      <p class="text-xl mb-4">Hi, I'm a passionate blogger sharing my thoughts and experiences with the world.</p>
      <p class="text-lg">I write about technology, travel, and personal growth.</p>
    </div>
  `
};

const PostsContent = {
  template: `
    <div class="text-center">
      <h2 class="text-4xl font-bold mb-6">Recent Posts</h2>
      <ul class="space-y-4">
        <li v-for="post in posts" :key="post.id" class="hover:text-rose-200 transition-colors duration-300">
          <a href="#" @click.prevent="$emit('read-latest')">{{ post.title }}</a>
        </li>
      </ul>
    </div>
  `,
  setup() {
    const posts = [
      { id: 1, title: "My Journey into Web Development" },
      { id: 2, title: "5 Must-Visit Destinations in 2024" },
      { id: 3, title: "How Meditation Changed My Life" },
    ];
    return { posts };
  }
};

const ContactContent = {
  template: `
    <div class="text-center">
      <h2 class="text-4xl font-bold mb-6">Contact Me</h2>
      <p class="text-xl mb-4">Feel free to reach out if you have any questions or just want to chat!</p>
      <a href="mailto:contact@myblog.com" class="text-rose-200 hover:underline">contact@myblog.com</a>
    </div>
  `
};

const LatestPostContent = {
  template: `
    <div class="text-center">
      <h2 class="text-4xl font-bold mb-6">Latest Post</h2>
      <h3 class="text-2xl font-semibold mb-4">My Journey into Web Development</h3>
      <p class="text-lg mb-4">
        Today, I want to share my exciting journey into the world of web development. 
        It all started when I decided to build my own blog from scratch...
      </p>
      <a href="#" @click.prevent="$emit('read-latest')" class="text-rose-200 hover:underline">Read more</a>
    </div>
  `
};

const activeComponent = computed(() => {
  switch (activeContent.value) {
    case 'home':
      return HomeContent;
    case 'about':
      return AboutContent;
    case 'posts':
      return PostsContent;
    case 'contact':
      return ContactContent;
    case 'latest-post':
      return LatestPostContent;
    default:
      return HomeContent;
  }
});
</script>

<style>
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

.float-animation {
  animation: float 3s ease-in-out infinite;
}
</style>